﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Class/Class</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Class">Class</a></h4>
      <div class="menu-item"><a href="#Class:constructor">constructor</a></div>
      <div class="menu-item"><a href="#Class:implement">implement</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Class"><a href="#Class">Class</a></h1>

<p class="description">The base Class of the <a href="http://mootools.net/">MooTools</a> framework.</p>

<h2 id="Class:constructor"><a href="#Class:constructor">Class Method: constructor</a></h2>

<h3 class="description">Syntax:</h3>

<pre class="javascript"><span class="kw2">var</span> MyClass = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span>properties<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - Can be one of the following types:

<ul>
<li>(<em>object</em>) The collection of properties that apply to the Class. Also accepts some special properties such as Extends, Implements, and initialize (see below).</li>
<li>(<em>function</em>) The initialize function (see below).</li>
</ul>
</li>
</ol>
<h4>Property: Extends</h4>

<ul>
<li>(<em>class</em>) The Class that this class will extend.</li>
</ul>
<p>The methods of this Class that have the same name as the Extends Class, will have a parent property, that allows you to call the other overridden method.
The Extends property should be the first property in a class definition.</p>

<h4>Property: Implements</h4>

<ul>
<li>(<em>class</em>)  The properties of a passed Class will be copied into the target Class.</li>
<li>(<em>array</em>)  An array of Classes, the properties of which will be copied into this Class.</li>
</ul>
<p>Implements is similar to Extends, except that it adopts properties from one or more other classes without inheritance.
Useful when implementing a default set of properties in multiple Classes. The Implements property should come after Extends but before all other properties.</p>

<h4>Property: initialize</h4>

<ul>
<li>(<em>function</em>) The initialize function will be the constructor for this class when new instances are created.</li>
</ul>
<h4>Property: toElement</h4>

<ul>
<li>(<em>function</em>) A method which returns an element. This method will be automatically called when passing an instance of a class in the <a href="../Element/Element.html#Window:document-id">document.id</a> function.</li>
</ul>
<h3>Returns:</h3>

<ul>
<li>(<em>class</em>) The created Class.</li>
</ul>
<h3>Examples:</h3>

<h4>Class Example:</h4>

<pre class="javascript"><span class="kw2">var</span> Cat = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    initialize: <span class="kw2">function</span><span class="br0">(</span><span class="kw3">name</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="kw3">name</span> = <span class="kw3">name</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> myCat = <span class="kw2">new</span> Cat<span class="br0">(</span><span class="st0">'Micia'</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span>myCat.<span class="kw3">name</span><span class="br0">)</span>; <span class="co1">// alerts 'Micia'</span>
&nbsp;
<span class="kw2">var</span> Cow = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    initialize: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'moooo'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h4>Extends Example:</h4>

<pre class="javascript"><span class="kw2">var</span> Animal = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    initialize: <span class="kw2">function</span><span class="br0">(</span>age<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">age</span> = age;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> Cat = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    <span class="kw2">Extends</span>: Animal,
    initialize: <span class="kw2">function</span><span class="br0">(</span><span class="kw3">name</span>, age<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">parent</span><span class="br0">(</span>age<span class="br0">)</span>; <span class="co1">// calls initalize method of Animal class</span>
        <span class="kw1">this</span>.<span class="kw3">name</span> = <span class="kw3">name</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> myCat = <span class="kw2">new</span> Cat<span class="br0">(</span><span class="st0">'Micia'</span>, <span class="nu0">20</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span>myCat.<span class="kw3">name</span><span class="br0">)</span>; <span class="co1">// alerts 'Micia'.</span>
<span class="kw3">alert</span><span class="br0">(</span>myCat.<span class="me1">age</span><span class="br0">)</span>; <span class="co1">// alerts 20.</span>
</pre>

<h4>Implements Example:</h4>

<pre class="javascript"><span class="kw2">var</span> Animal = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    initialize: <span class="kw2">function</span><span class="br0">(</span>age<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">age</span> = age;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> Cat = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    Implements: Animal,
    setName: <span class="kw2">function</span><span class="br0">(</span><span class="kw3">name</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="kw3">name</span> = <span class="kw3">name</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> myAnimal = <span class="kw2">new</span> Cat<span class="br0">(</span><span class="nu0">20</span><span class="br0">)</span>;
myAnimal.<span class="me1">setName</span><span class="br0">(</span><span class="st0">'Micia'</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span>myAnimal.<span class="kw3">name</span><span class="br0">)</span>; <span class="co1">// alerts 'Micia'.</span>
</pre>

<h2 id="Class:implement"><a href="#Class:implement">Class Method: implement</a></h2>

<p class="description">Implements the passed in properties into the base Class prototypes, altering the base Class.
The same as creating a <a href="#Class:constructor">new Class</a> with the Implements property, but handy when you need to modify existing classes.</p>

<h3>Syntax:</h3>

<pre class="javascript">MyClass.<span class="me1">implement</span><span class="br0">(</span>properties<span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>properties - (<em>object</em>) The properties to add to the base Class.</li>
</ol>
<h3>Examples:</h3>

<pre class="javascript"><span class="kw2">var</span> Animal = <span class="kw2">new</span> <span class="kw2">Class</span><span class="br0">(</span><span class="br0">{</span>
    initialize: <span class="kw2">function</span><span class="br0">(</span>age<span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">age</span> = age;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
Animal.<span class="me1">implement</span><span class="br0">(</span><span class="br0">{</span>
    setName: <span class="kw2">function</span><span class="br0">(</span><span class="kw3">name</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="kw3">name</span> = <span class="kw3">name</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
<span class="kw2">var</span> myAnimal = <span class="kw2">new</span> Animal<span class="br0">(</span><span class="nu0">20</span><span class="br0">)</span>;
myAnimal.<span class="me1">setName</span><span class="br0">(</span><span class="st0">'Micia'</span><span class="br0">)</span>;
<span class="kw3">alert</span><span class="br0">(</span>myAnimal.<span class="kw3">name</span><span class="br0">)</span>; <span class="co1">// alerts 'Micia'</span>
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
